<template>
    <div class="header-box">
        <div class="header">
            维他希汀后台管理系统
        </div>


        <div class="user-box">
            <div class="user-img-box" @click="showHandle">
                <img class="user-img" src="../assets/adminHeader.jpg" alt="">
            </div>

            <div class="user-name" @click="showHandle">
                登录用户
            </div>


            <div class="user-handle" v-show="handleShow">
                <div class="user-handle-item" @click="showHandle">用户信息</div>
                <div class="user-handle-item" @click="logout">退出登录</div>
            </div>

        </div>




    </div>

</template>


<script>

export default {
    name: 'myHeader',
    data() {
        return {
            meauShow: false,
            handleShow: false,
        }
    },

    methods: {
        meauSwitch() {

            this.meauShow = !this.meauShow;

            this.$emit('data-meau', this.meauShow);
        },

        navigatorTo(e) {
            this.$router.push(e.target.dataset.url)
        },


        showHandle() {
            this.handleShow = !this.handleShow;
        },

        logout() {
            localStorage.setItem("token", '')
            this.$router.push("/Login")
        },

        clearCookie(name) {
            document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
        }
    }
}

</script>


<style lang="less" scoped>
.header {
    width: 100%;
    text-align: center;
    padding: 0 auto;
    height: 80px;
    background-color: #043346;
    color: white;
    line-height: 80px;
    font-size: 24px;
    font-family: Outfit, sans-serif;
}

.user-box {
    position: absolute;
    right: 30px;
    top: 10px;

    .user-img-box {
        width: 40px;
        height: 40px;
        background-color: white;
        border-radius: 20px;
        margin-left: 30px;

        .user-img {
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    }

    .user-name {
        font-size: 12px;
        width: 100px;
        margin-top: 5px;
        text-align: center;
        color: white;
    }

    .user-handle {
        width: 80px;
        height: 80px;
        background-color: #186d8f;
        position: absolute;
        right: 60px;
        top: 5px;
        border-radius: 5px;
        font-size: 12px;
        text-align: center;
        color: white;

        .user-handle-item {
            height: 40px;
            line-height: 40px;
            background-color: #186d8f;
            border-radius: 5px;
        }

        .user-handle-item:hover {
            background-color: #0f5571;
            color: white;
        }

    }
}
</style>